package com.wonderful.compose.booking

import android.annotation.SuppressLint
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.KeyboardArrowDown
import androidx.compose.material.icons.filled.Search
import androidx.compose.material.icons.rounded.LocationOn
import androidx.compose.material.icons.rounded.Notifications
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TextFieldDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.composed
import androidx.compose.ui.draw.drawWithContent
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalTextToolbar
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.wonderful.compose.ui.theme.BookingBackground
import com.wonderful.compose.ui.theme.BookingPrimary
import com.wonderful.compose.ui.theme.BookingSurface
import com.wonderful.compose.ui.theme.ComposeLearnTheme


/**
 * Desc:
 * @Author: wonderful
 * @Time: 2024/1/29 11:54
 */
class BookingActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeLearnTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = BookingBackground
                ) {
                    HomeScreen()
                }
            }
        }
    }

    @Preview(showBackground = true)
    @Composable
    fun HomeScreen() {
        Column {
            Header()
            Search()
            Spacer(modifier = Modifier.height(16.dp))
            HouseList()
            PopularHouse()
        }
    }

    @Preview(showBackground = true)
    @Composable
    fun Header() {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(24.dp),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            Column {
                LocationSelector()
                Spacer(modifier = Modifier.height(10.dp))
                LocationValue("Solo, Indonesia")
            }
            NotificationButton()
        }
    }

    @Preview(showBackground = true)
    @Composable
    fun LocationSelector() {
        Row(verticalAlignment = Alignment.CenterVertically) {
            Text(text = "Location")
            Spacer(modifier = Modifier.width(6.dp))
            Icon(
                imageVector = Icons.Default.KeyboardArrowDown,
                contentDescription = null,
                modifier = Modifier.size(26.dp),
                tint = Color.LightGray
            )
        }
    }

    @Preview(showBackground = true)
    @Composable
    fun LocationValue(location: String = "Location") {
        Row(verticalAlignment = Alignment.CenterVertically) {
            Icon(
                imageVector = Icons.Rounded.LocationOn,
                contentDescription = null,
                modifier = Modifier.size(30.dp),
                tint = BookingPrimary
            )
            Spacer(modifier = Modifier.width(8.dp))
            Text(
                text = location,
                style = TextStyle(
                    fontSize = 28.sp,
                    fontWeight = FontWeight.W500,
                    fontFamily = FontFamily.SansSerif
                )
            )
        }
    }

    @Preview(showBackground = true)
    @Composable
    fun NotificationButton(modifier: Modifier = Modifier) {
        Icon(
            imageVector = Icons.Rounded.Notifications,
            contentDescription = null,
            modifier = modifier
                .background(BookingSurface, MaterialTheme.shapes.medium)
                .padding(6.dp)
                .size(32.dp)
                .withNotificationDot()
        )
    }


    /**
     * 扩展函数：带点的 modifier
     */
    @SuppressLint("UnnecessaryComposedModifier")
    private fun Modifier.withNotificationDot(dotRadius: Dp = 4.dp) = composed {
        val primaryColor = BookingPrimary
        val surfaceColor = BookingSurface
        drawWithContent {
            val dotCenter = Offset(size.width * 0.7f, size.height * 0.25f)
            val dotRadiusValue = dotRadius.value * density
            // draw notification bell with the background
            drawContent()
            // draw slightly bigger circle as the white outline
            drawCircle(surfaceColor, dotRadiusValue * 1.2f, dotCenter)
            // draw the dot itself
            drawCircle(primaryColor, dotRadiusValue, dotCenter)

        }
    }

    @Preview(showBackground = true, backgroundColor = 0xFFFFFFFF)
    @Composable
    fun Search() {
        var searchValue by remember {
            mutableStateOf(TextFieldValue())
        }

        Row(
            modifier = Modifier
                .fillMaxWidth()
                .height(60.dp)
                .padding(horizontal = 16.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            SearchBox(
                value = searchValue,
                onValueChange = { searchValue = it },
                modifier = Modifier.weight(1f)
            )
            Spacer(modifier = Modifier.width(16.dp))
            Button(
                onClick = { LocalTextToolbar },
                shape = MaterialTheme.shapes.medium,
                contentPadding = PaddingValues(8.dp),
                colors = ButtonDefaults.buttonColors(containerColor = BookingPrimary),
                modifier = Modifier
                    .fillMaxHeight()
                    .padding(2.dp)
                    .aspectRatio(1f)
            ) {
                Icon(imageVector = Icons.Default.Search, contentDescription = "search")
            }
        }
    }

    @OptIn(ExperimentalMaterial3Api::class)
    @Composable
    fun SearchBox(
        value: TextFieldValue,
        onValueChange: (TextFieldValue) -> Unit,
        modifier: Modifier = Modifier
    ) {
        val colors = TextFieldDefaults.colors()
        OutlinedTextField(
            value = value,
            onValueChange = onValueChange,
            placeholder = { Text(text = "Search favorite house...") },
            singleLine = true,
            colors = colors,
            modifier = modifier
        )
    }
}

